<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>slide-1</title>
  </head>
  <style>  
  *{
    margin: 0;
    padding: 0;
  }
  body{
    background: #FF6D32;
    overflow-x: hidden;
  }
    .wrap{
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      transition: transform .3s ease-out;
    }
    .wrap.move{
      transform: scale(.6) translateZ(0);
      overflow: visible;
    }
    .slick-track {
      position: relative;
      top: 0;
      left: 0;
      width: 6000px;
      height: 100%;
      -webkit-transition: -webkit-transform 1s cubic-bezier(.68,-.55,0,1.55);
      transition: -webkit-transform 1s cubic-bezier(.68,-.55,0,1.55);
      -o-transition: transform 1s cubic-bezier(.68,-.55,0,1.55);
      transition: transform 1s cubic-bezier(.68,-.55,0,1.55);
      transition: transform 1s cubic-bezier(.68,-.55,0,1.55),-webkit-transform 1s cubic-bezier(.68,-.55,0,1.55);
    }
    .slick-track::after{
      display: block;
      content: "";
      clear: both;
      width: 0;
      height: 0;
      visibility: hidden;
    }
    .slick-track .slick-slide{
      width: 1200px;
      float: left;
    }
    .slick-track .slick-slide img{
      display: block;
      width: 100%;
      margin: 0 auto;
    }
    .left,.right{
      position: absolute;
      color: #000;
      font-size: 45px;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      text-decoration: none;
    }
    .left{
      left: 100px;
      top: 250px;
    }
    .right{
      right:100px;
      top: 250px;
    }
    .page{
      margin-top: 20px;
      width: 100%;
      text-align: center;
    }
    .page li{
      cursor: pointer;
      display: inline-block;
      background: transparent;
      width: 1em;
      height: 1em;
      border: 1px solid rgb(214, 15, 15);
      border-radius: 50%;
      margin:0 .5em;
      overflow: hidden;
    }
    .page li.active{
      background: rgb(47, 25, 124);
    }
  </style>
  <body>
    <a class="left" href="javascript:;"> &lt;  </a>
    <div class="wrap">
        <div class="slick-track">
            <div class="slick-slide ">
              <img src="./oswweb-img/1.png" alt="">
            </div>
            <div class="slick-slide ">
              <img src="./oswweb-img/2.png" alt="">
            </div>
            <div class="slick-slide ">
              <img src="./oswweb-img/3.png" alt="">
            </div>
            <div class="slick-slide ">
              <img src="./oswweb-img/4.png" alt="">
            </div>
            <div class="slick-slide ">
              <img src="./oswweb-img/5.png" alt="">
            </div>
        </div>
    </div>
    <a class="right" href="javascript:;"> &gt;</a>
    <ul class="page">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <script src="./js/jq.js"></script>
    <script>
      var len=$('.slick-slide').length;
      var step=1200;
      var index=0;
      $(".left").on("click",function() {
        index--;
        if(index<0){
          index=len-1;
        }
        move();
        slide(index,step);
        page(index);
      })
      $(".right").on("click",function() {
        index++;
        if(index>len-1){
          index=0;
        }
        move();
        slide(index,step);
        page(index);
      })
      // page
      $('.page li').on('click',function() {
        index=$(this).index();
        move();
        page(index);
        slide(index,step);
      })
      // 图片滚动函数
      function slide(index,step){
        $(".slick-track").animate({},function() {
          $(".slick-track").css({"transform":"translate3d("+(-step*index)+"px, 0px, 0px)"})
        })
      }
      // 按钮样式切换
      function page(index){
        $('.page li').removeClass("active");
        $('.page li').eq(index).addClass("active")
      }
      // 删除增加move
      function move(){
        $(".wrap").addClass("move");
        setTimeout(function(){
          $(".wrap").removeClass("move");
        },800)
      }
    </script>
  </body>
</html>
